import React, { useEffect, useState } from 'react';
import { StyleSheet, Image } from 'react-native';
import Tools from '../../../../utils/Tools.ts';
import ButtonTemplate from './template/ButtonTemplate.tsx';
import SearchTemplate from './template/SearchTemplate.tsx';
import BannerTemplate from './template/BannerTemplate.tsx';
import { View } from 'native-base';
import RecommendTemplate from './template/RecommendTemplate.tsx';
import ListProductTemplate from './template/ListProductTemplate.tsx';
interface IHomeTemplateProps {
  serverList?: IServerBtnListRes;
  btnModelRelations: BtnModelRelations[];
}

const HomeTemplate: React.FC<IHomeTemplateProps> = (props) => {
  const [template, setTemplate] = useState<BtnModelRelations[]>([]);

  useEffect(() => {
    // 将模版与按键匹配
    if (props.serverList && props.btnModelRelations.length > 0) {
      const _btnModelRelations: BtnModelRelations[] = JSON.parse(JSON.stringify(props.btnModelRelations));
      if (props.btnModelRelations[0].moduleType === 5) {
        const [first, ...rest] = _btnModelRelations;
        setTemplate(handleTemplateMatching(rest));
      } else {
        setTemplate(handleTemplateMatching(props.btnModelRelations));
      }
    }
  }, [props.btnModelRelations]);

  // 模版匹配按钮
  const handleTemplateMatching = (btnModelRelations: BtnModelRelations[]) => {
    let _btnModelRelations = Tools.deepClone(btnModelRelations);
    const filterBtnList = props.serverList!.btnList.filter((item) => !item.parentBtnCode);
    _btnModelRelations.forEach((item) => {
      if (item.moduleType == 1 && item.btnFormats.length > 0) {
        item.btnFormats.forEach((item2) => {
          item2.list = Tools.convertOneDToTwoD(
            filterBtnList.filter((item3) => item3.formatCode === item2.formatCode && item3.moduleCode === item.moduleCode),
            item2.row * item2.col,
          );
          item2.currentIndex = 0;
        });
      }
      if (item.moduleType === 2) {
        item.banner = filterBtnList.filter((item2) => item2.moduleCode === item.moduleCode);
      }
      if (item.moduleType === 3) {
        item.recommend = Tools.convertOneDToTwoD(
          filterBtnList.filter((item2) => item2.moduleCode === item.moduleCode),
          3,
        );
      }
      if (item.moduleType === 4) {
        item.productList = filterBtnList.find((item2) => item2.moduleCode == item.moduleCode) as IProductList;
      }
    });

    //  搜索模块 推荐模块、产品模块没有对应按键 模版中不渲染
    [6, 3, 4].forEach((item) => {
      if (!props.serverList?.btnList.find((c) => c.btnModuleType === item)) {
        _btnModelRelations = _btnModelRelations.filter((c) => c.moduleType !== item);
      }
    });

    return _btnModelRelations;
  };

  return (
    <React.Fragment>
      {template.map((item, index) => {
        return (
          <View style={[styles.box, { paddingTop: item.tagUrl ? 0 : item.moduleType === 1 ? 8 : 0 }]} key={index}>
            {item.tagUrl && <Image height={40} resizeMode={'cover'} source={{ uri: item.tagUrl }} />}
            {/* 按键模版 */}
            {item.moduleType === 1 && item.btnFormats.length > 0 && <ButtonTemplate data={item} btnList={props.serverList!.btnList} />}
            {/* banner模版 */}
            {item.moduleType === 2 && item.banner && item.banner.length > 0 && <BannerTemplate data={item.banner} />}
            {/* 推荐模版 */}
            {item.moduleType === 3 && item.recommend && item.recommend.length > 0 && <RecommendTemplate data={item.recommend} />}
            {/* 列表商品模版 */}
            {item.moduleType === 4 && item.productList && <ListProductTemplate data={item.productList} title={item.listTitle} styleType={item.styleType} />}
            {/* 大图模版 */}
            {item.moduleType === 5 && index !== 0 && <Image style={{ height: 300, width: '100%' }} source={{ uri: item.bigImgUrl }} />}
            {/* 搜索模版 */}
            {item.moduleType === 6 && <SearchTemplate />}
          </View>
        );
      })}
    </React.Fragment>
  );
};
const styles = StyleSheet.create({
  box: { width: '100%', backgroundColor: '#fff', borderRadius: 8, marginBottom: 12, overflow: 'hidden' },
});

export default HomeTemplate;
